<template>
  <div>
    <div class="ttop">
      <van-nav-bar title="乐购" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="top">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerItem" :key="item.id">
          <img :src="item.img_url" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 灰色 -->
    <div class="grays">
      <div class="gray">
        <p>
          <span>○</span>30天无忧退款
        </p>
        <p>
          <span>○</span>48小时快速退款
        </p>
        <p>
          <span>○</span>满88元免邮费
        </p>
      </div>
    </div>
    <div class="info">
      <p>{{info.name}}</p>
      <p>{{info.goods_brief}}</p>
      <p>￥{{info.retail_price}}</p>
    </div>

    <div class="section">
      <van-nav-bar title="请选择规格数量" />
      <div class="gary"></div>
    </div>

    <div class="number">
      <div class="head">商品参数</div>
      <div class="item" v-for="item in attribute" :key="item.id">{{item.name}}:{{item.value}}</div>
    </div>
    <!-- 中间一大块 -->
    <div class="bottom" style="font-size:0" v-html="info.goods_desc"></div>
    <!-- 常见问题 -->
    <div class="issue">
      <div class="header">常见问题</div>
      <div class="pro" v-for="item in issue" :key="item.id">
        <p>*{{item.question}}</p>
        <p>*{{item.answer}}</p>
      </div>
    </div>
    <div class="grays"></div>
    <div class="sublist">
      <p>大家都在看</p>
      <ul>
        <li v-for="item in productList" :key="item.id">
          <img :src="item.list_pic_url" alt />
          <p>{{item.name}}</p>
          <p>￥{{item.retail_price}}</p>
        </li>
      </ul>
    </div>
    <!-- 添加购物车底部 弹窗  -->
    <van-goods-action style="padding-top:6px" class="action">
      <!-- 加o图形变成空心 -->
      <!-- <van-goods-action-icon icon="star-o" text="收藏" badge="" @click="onClickIcon" /> -->
      <van-goods-action-icon icon="star-o" text="收藏" badge @click="clickCollect" />
      <van-goods-action-icon icon="cart-o" text="购物车" badge @click="clickBuy" />
      <!-- 只有点击后两个图标才出现弹窗 -->
      <van-cell is-link @click="showPopup">
        <van-goods-action-icon icon="gold-coin-o" text="立即购买" />
      </van-cell>
      <van-cell is-link @click="showPopup" style="width:400px">
        <van-goods-action-button type="danger" text="加入购物车"/>
      </van-cell>
    </van-goods-action>
    <van-popup v-model="show" position="bottom" class="popup">
      <div class="card">
        <div class="left">
          <img :src="info.primary_pic_url" alt />
        </div>
        <div class="txt">
          <p>价格￥{{info.retail_price}}</p>
          <p>请选择数量</p>
        </div>
      </div>
      <p>数量</p>
      <!-- 计数器 -->
      <!-- <van-stepper @minus="dec(item.id)" @blur="upt1(item.id,$event)" @plus="addCar(item.id)" v-model="item.num" min="0" :max="item.oldNum" /> -->
      <van-stepper v-model="value"/>
      <van-goods-action style="padding-top:6px" class="action">
        <van-goods-action-icon icon="star-o" text="收藏" @click="clickCollect" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="clickBuy" />
        <van-goods-action-icon icon="gold-coin-o" text="立即购买" @click="clickBuy" />
        <van-goods-action-button type="danger" text="加入购物车" @click="clickButton" />
      </van-goods-action>
    </van-popup>
    <!-- 弹出层部分结束 -->
  </div>
</template>

<script>
import { detailaction } from "@/api/home/goodsdetail";
import { addcollect } from "@/api/my/collection.js";
import { addCart } from "@/api/car";
export default {
  data() {
    return {
      bannerItem: "",
      info: "",
      attribute: "",
      issue: "",
      productList: "",
      show: false, //弹出层
      value: 1, //计数器
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 弹出层
    showPopup() {
      this.show = true;
    },
    clickCollect() {
      var openId = localStorage.getItem("openId");
      addcollect({
        goodsId: this.$route.query.id,
        openId: openId,
      }).then((res) => {
        // console.log(this.$route.query.id,openId);
        console.log(res);
      });
      // this.$router.push({name:"car"})//点击购物车跳转到购物车页面
    },
    clickBuy() {
      this.$router.push({ name: "car" });
    },
    clickButton() {
      var openId = localStorage.getItem("openId");
      addCart({
        goodsId: this.$route.query.id,
        number: this.value,
        openId: openId,
      }).then((res) => {
        console.log(res);
      });
      console.log(this.value);
    },
  },
  created() {
    var openId = localStorage.getItem("openId");
    detailaction({
      id: this.$route.query.id,
      openId: openId,
    }).then((res) => {
      console.log(res);
      (this.bannerItem = res.gallery), (this.info = res.info);
      this.attribute = res.attribute;
      this.issue = res.issue;
      this.productList = res.productList;
    });
  },
};
</script>

<style lang="scss" scoped>
.ttop {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  height: 46px;
  z-index: 666;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  .my-swipe {
    width: 375px;
    height: 375px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.grays {
  height: 45px;
  background-color: #f4f4f4;
  .gray {
    padding-top: 6px;
    margin: 0px 10px;
    width: 96%;
    display: flex;
    justify-content: space-between;
    p {
      margin-top: 0px;
    }
    span {
      color: red;
      vertical-align: 1.5px;
    }
  }
}
.info {
  margin: 20px;
  height: 100px;
  // display: flex;
  // align-items: center;
  // flex-wrap: wrap;
  p:nth-child(1) {
    font-size: 0.54667rem;
  }
  p:nth-child(2) {
    margin-bottom: 0.33333rem;
    font-size: 0.32rem;
    color: #999;
  }
  p:nth-child(3) {
    margin-top: 0.13333rem;
    font-size: 0.46667rem;
    color: #b4282d;
  }
}
.section {
  width: 100%;
  height: 50px;
  .gary {
    height: 10px;
    background-color: #f4f4f4;
  }
}
.number {
  padding-bottom: 10px;
  // height: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .head {
    width: 100%;
    height: 25px;
    margin: 3px;
    font-size: 0.50667rem;
  }
  .item {
    width: 90%;
    height: 30px;
    line-height: 30px;
    background-color: #f4f4f4;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.bottom {
  ::v-deep img {
    width: 100%;
  }
}
.issue {
  height: 380px;
  .header {
    height: 20px;
  }
  .pro {
    text-align: left;
    p:nth-child(1) {
      color: red;
      font-size: 15px;
    }
    p:nth-child(2) {
      color: darkslateblue;
      font-size: 10px;
    }
  }
}
.sublist {
  overflow: hidden;
  width: 100%;
  background-color: #f4f4f4;
  p {
    margin: 15px auto;
  }
  ul {
    width: 365px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 180px;
      background-color: white;
      margin-bottom: 5px;

      img {
        width: 151px;
        height: 151px;
      }

      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 12px;
        margin-top: 16px;
        text-align: left;
      }
      p:nth-child(3) {
        color: red;
      }
    }
  }
}
// 底部
.van-cell {
  width: 28%;
  i {
    display: none;
  }
}
.popup {
  height: 200px;
  text-align: left;
  padding-top: 15px;
  padding-left: 20px;
  padding-bottom: 15px;
  .card {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    height: 80px;
    background-color: #fff;
    .left {
      width: 50%;
      img {
        width: 88px;
        height: 88px;
      }
    }
    .txt {
      width: 50%;
      p:nth-child(1) {
        color: #b4282d;
        margin-bottom: 20px;
      }
    }
  }
}
</style>